<template>
  <view class="formalLogin allColumnCenter">
    <header-title title="拾亲登录"></header-title>
    <view class="formalLogin_content allColumnCenter">
      <image-avater :width="168" :height="168"></image-avater>
      <text class="formalLogin_content_text">拾亲</text>
    </view>
    <view class="authorizeLogins allRowCenter">
      <text class="authorizeLogins_text">授权登录</text>
    </view>
    <view class="logInWithPhone allRowCenter" @click.stop="logInPhone">
      <text class="logInWithPhone_text">手机号登录</text>
    </view>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";
import ImageAvater from "../../components/shiqinComponents/pageComponents/imageAvater.vue";

export default {
  components: {ImageAvater, HeaderTitle},
  data() {
    return {};
  },
  methods:{
    logInPhone(){
      this.$nav.navigateTo('/pages/loginType/index')
    }
  }
}
</script>

<style lang="scss">
.formalLogin {
  width: 750rpx;
  min-height: 100vh;
  overflow: hidden;
  background: #F5F5F5;
  border-radius: 0rpx 0rpx 0rpx 0rpx;

  .formalLogin_content {
    margin-top: 153rpx;
    width: 750rpx;

    .formalLogin_content_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 38rpx;
      color: #4B4B4B;
    }
  }

  .authorizeLogins {
    margin-top: 80rpx;
    width: 470rpx;
    height: 100rpx;
    background: #FF4206;
    border-radius: 50rpx 50rpx 50rpx 50rpx;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }

  .logInWithPhone {
    margin-top: 53rpx;
    width: 470rpx;
    height: 100rpx;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    border: 2rpx solid #FF4206;

    &_text {
      font-weight: 500;
      font-size: 30rpx;
      color: #FF7950;
    }
  }
}
</style>
